/* eslint-disable max-lines */
import TauPage from '@/components/TauPage';
import TauActionPanel from '@/components/TauActionPanel';
import TauTable from '@/components/TauTable';
import { useStore } from '@/hooks';
import { Drawer, Message, Checkbox, Button, Tab, Tree, Icon } from '@alifd/next';
import { t } from '@lingui/macro';
import { uniqueId } from 'lodash';
import { observer } from 'mobx-react-lite';
import React, { useRef, useState, useEffect } from 'react';
import ActivityForm from './components/ActivityForm';
import { ENUMS, column, toSelectDataSource } from './stores/definitions';
import { toJS } from 'mobx';
import { useHistory } from 'react-router';

import QR from './components/QR';
import AddWhiteList from './components/AddWhiteList';
import MoreFuncDropDown from '@/components/MoreFuncDropDown';
import Orders from './components/Orders/index';
import BatchApply from './components/BatchApply';
import SendCoupon from './components/SendCoupon';
import CouponsTab from './components/CouponsTab';
import AppliedDetail from './components/AppliedDetail';
import SubstitutionCoupon from './components/SubstitutionCoupon';
import ActivityLogs from './components/ActivityLogs';
import PriceCountTab from './components/PriceCountTab';
import Announcement from './components/Announcement';
import SendNotify from './components/SendNotify';
import Transfer from './components/Transfer';
import SendCouponBag from './components/SendCouponBag';
import ChartsStatistic from './components/ChartsStatistic';

const tableId = uniqueId('tauTable-');

function Activity() {
  const [modal, setModal] = useState([]);
  const [QRModal, setQRModal] = useState({});
  const [showOrders, setShowOrders] = useState(false);
  const [showCoupon, setShowCoupon] = useState(false);
  const [showPrice, setShowPrice] = useState(false);
  const [counts, setCounts] = useState([]);
  const [couponCount, setCouponCount] = useState([]);
  const [priceTotal, setPriceTotal] = useState([]);
  const [activityType, setActivityType] = useState('');
  const [couponInfo, setCouponInfo] = useState([]);
  const [tabIdx, setTabIdx] = useState('');
  const { activityStore: store } = useStore();
  const objRef = useRef(); // 当前选中的对象
  const history = useHistory();

  // 获取卡券接口  区别于活动
  const COUPONTYPEAPI = {
    1: { api: store.api.getCouponInfoNormal },
    2: { api: store.api.getCouponInfoNormal },
    3: { api: store.api.getCouponInfo },
    4: { api: store.api.getCouponInfoNormal },
    5: { api: store.api.getCouponInfoNormal },
  };

  // 获取活动金额接口 区别于活动
  const PRICETYPEAPI = {
    1: { api: store.api.getNormalPrices },
    2: { api: store.api.getNormalPrices },
    3: { api: store.api.getCustomerPrices },
    4: { api: store.api.getNormalPrices },
    5: { api: store.api.getNormalPrices },
  };

  // 监听订单
  useEffect(() => {
    if (showOrders) {
      (async () => {
        const orders = await fetchOrderCounts();
        setCounts(orders);
      })();
    } else {
      setCounts([]);
    }
  }, [showOrders, store.data]);

  // 监听卡券
  useEffect(() => {
    if (showCoupon) {
      (async () => {
        const coupons = await fetchCouponCounts();
        setCouponCount(coupons);
      })();
    } else {
      setCounts([]);
    }
  }, [showCoupon, store.data]);

  // 监听金融
  useEffect(() => {
    if (showPrice) {
      (async () => {
        const total = await fetchPriceTotals();
        setPriceTotal(total);
      })();
    } else {
      setCounts([]);
    }
  }, [showPrice, store.data]);

  // 获取订单
  async function fetchOrderCounts() {
    const promiseAry = store.data.map(async (p) => {
      const { id } = p;
      return store.api.getOrderCount({
        search: {
          activity: id,
        },
      }).then((r) => ({ id: p.id, count: r }));
    });
    return Promise.all(promiseAry);
  }

  // 获取卡券
  async function fetchCouponCounts() {
    const promiseAry = store.data.map(async (p) => {
      const { id } = p;
      return COUPONTYPEAPI[store._tabState].api({
        activityId: id,
      }).then((r) => ({
        id,
        count: r,
      }));
    });
    return Promise.all(promiseAry);
  }

  // 获取金额
  async function fetchPriceTotals() {
    const promiseAry = store.data.map(async (p) => {
      const { id } = p;
      return PRICETYPEAPI[store._tabState].api({
        activityId: id,
      }).then((r) => ({
        id,
        total: r,
      }));
    });
    return Promise.all(promiseAry);
  }

  // 获取列表数据
  const handleOnSearch = (params) => {
    const { channelDate, getOnDate, ...searchArgs } = params.values;
    const [from, to] = channelDate || [];
    const [fromTime, toTime] = getOnDate || [];
    store.search = {
      from,
      to,
      fromTime,
      toTime,
      ...searchArgs,
    };
  };

  // 点击打开添加活动
  const handleOpenAdd = () => {
    objRef.current = {};
    setTabIdx(store._tabState);
    setModal(['add']);
  };

  // 点击打开编辑
  const handleOpenEdit = (current) => {
    objRef.current = current;
    setTabIdx(store._tabState);
    setModal(['edit']);
  };

  // Modal窗口关闭回调
  const handleCancel = () => {
    setModal([]);
  };

  /**
   * 编辑活动
   * @param {*} result
   */
  const handleUpdate = async (result) => {
    if (!_.isEmpty(result)) {
      try {
        await store.update(toJS(result));
        Message.success({ content: t`修政成功` });
      } catch (e) {
        Message.error({ content: t`修政失败`, duration: 7000 });
        throw e;
      }
    }
    setModal([]);
  };

  /**
   * 创建活动
   * @param {*} result
   */
  const handleCreate = async (result) => {
    if (!_.isEmpty(result)) {
      try {
        await store.create({ ...toJS(result) });
        Message.success({ content: t`活动创建成功` });
      } catch (e) {
        Message.error({ content: t`活动创建失败`, duration: 7000 });
        throw e;
      }
    }
    setModal([]);
  };

  /**
   * 打开二维码
   * @param {*} record
   */
  const handelOpenQR = async (record) => {
    const { id, name } = record;
    setQRModal({
      open: true,
      name,
      okText: '下载',
      onCancel: QROnCancel,
      id,
    });
  };

  // 专属通知
  const handleSendNotify = (result) => {
    objRef.current = result;
    setModal(['notify']);
  };

  // 关闭二维码
  const QROnCancel = () => {
    setQRModal({ open: false });
  };

  /**
   * 白名单添加
   * @param {*} result
   */
  const handleAdd = async (result) => {
    if (!_.isEmpty(result)) {
      try {
        await store.update({ ...toJS(result) });
        Message.success({ content: t`白名单添加成功` });
      } catch (e) {
        Message.error({ content: t`白名单添加失败`, duration: 7000 });
        throw e;
      }
    }
    setModal([]);
  };

  // 查看订单
  const handleOpenOrder = (result) => {
    objRef.current = result;
    setModal(['orders']);
  };

  // 查看订单
  const handleOpenPrice = (result) => {
    objRef.current = result;
    setModal(['priceCount']);
  };

  // 查看详情
  const handleOpenView = (result) => {
    objRef.current = result;
    setTabIdx(store._tabState);
    setModal(['view']);
  };

  // 批次申领
  const handleBatchApply = (result) => {
    objRef.current = result;
    setModal(['apply']);
  };

  // 发放卡券包
  const handleSendCouponBag = (result) => {
    objRef.current = result;
    setModal(['couponBag']);
  };

  // 发放卡券包
  const handleSendCoupon = (result) => {
    objRef.current = result;
    setModal(['coupon']);
  };

  // 查看卡券
  const handleOpenCoupon = (result, type, activity) => {
    objRef.current = activity;
    setCouponInfo([...result]);
    setModal(['viewCoupon']);
    setActivityType(type);
  };

  // 申领记录
  const handleAppliedDetail = (result) => {
    objRef.current = result;
    setModal(['appliedDetail']);
  };

  // 客服代发
  const handleServiceSubstitution = (result) => {
    objRef.current = result;
    setModal(['substitution']);
  };

  // 活动公告
  const handleAnnouncement = (result) => {
    objRef.current = result;
    setModal(['announcement']);
  };

  // 活动公告
  const handleTransfer = (result) => {
    objRef.current = result;
    setModal(['transfer']);
  };

  /**
   * 批次申领
   * @param {*} result
   */
  const batchApplySubmit = async (result) => {
    if (!_.isEmpty(result)) {
      try {
        await store.batchApply(result);
        Message.success({ content: t`批次申领成功` });
      } catch (e) {
        Message.error({ content: t`批次申领失败`, duration: 7000 });
        throw e;
      }
    }
    setModal([]);
  };

  /**
   * @description 发放卡券包
   * @param {*} result
   * @returns true
   */
  const sendCouponBagSubmit = async (result) => {
    if (!_.isEmpty(result)) {
      try {
        await store.sendCoupon(toJS(result));
        Message.success({ content: t`发放成功` });
      } catch (e) {
        Message.error({ content: t`发放失败`, duration: 7000 });
        throw e;
      }
    }
    setModal([]);
  };

  /**
   * @description 发放卡券
   * @param {*} result
   * @returns true
   */
  const sendCouponSubmit = async (result) => {
    if (!_.isEmpty(result)) {
      try {
        await store.sendCouponBag(toJS(result));
        Message.success({ content: t`发放成功` });
      } catch (e) {
        Message.error({ content: t`发放失败`, duration: 7000 });
        throw e;
      }
    }
    setModal([]);
  };

  /**
   * @description 客服代发卡券
   * @param {*} result
   * @returns true
   */
  const substitutionCouponSubmit = async (result) => {
    if (!_.isEmpty(result)) {
      try {
        await store.substitutionCoupon(toJS(result));
        Message.success({ content: t`代发成功` });
      } catch (e) {
        Message.error({ content: t`代发失败`, duration: 7000 });
        throw e;
      }
    }
    setModal([]);
  };

  /**
   * @description 客服代发卡券
   * @param {*} result
   * @returns true
   */
  const couponTransferSubmit = async (result) => {
    if (!_.isEmpty(result)) {
      try {
        await store.couponTransfer(toJS(result));
        Message.success({ content: t`转赠成功` });
      } catch (e) {
        Message.error({ content: t`转赠失败`, duration: 7000 });
        throw e;
      }
    }
    setModal([]);
  };

  /**
   * 发布活动通知
   * @param {*} result
   * @returns true
   */
  const onSendNotifySubmit = async (result) => {
    if (!_.isEmpty(result)) {
      try {
        await store.sendNotify(toJS(result));
        Message.success({ content: t`通知发布成功` });
      } catch (e) {
        Message.error({ content: t`通知发布失败`, duration: 7000 });
        throw e;
      }
    }
    setModal([]);
  };

  /**
   * 编辑活动页tab
   */
  const TABSITEM = [
    {
      title: t`活动详情`,
      key: '1',
      content: (
        <ActivityForm
          id={objRef.current?.id}
          modal={modal}
          onCancel={handleCancel}
          tabIdx={tabIdx}
          onSubmit={modal[0] === 'add' ? handleCreate : handleUpdate}
        />
      ),
    },
    {
      title: t`历史变更记录`,
      key: '2',
      content: (
        <ActivityLogs
          id={objRef.current?.id}
          modal={modal}
          onCancel={handleCancel}
          onSubmit={modal[0] === 'add' ? handleCreate : handleUpdate}
        />
      ),
    },
  ];

  /**
   * 查看卡券信息
   * @param {*} activity 活动id
   * @return
   */
  const couponComponent = (activity) => {
    const { id, name, type } = activity;
    let dataSource = [];
    if (type === '3') {
      const idx = couponCount.find((p) => p.id === id)?.count || [];
      dataSource = [
        {
          label: t`${name} / ${idx?.length}`,
          key: `${name}-${idx?.length}`,
          children: idx?.map(({ batchName, customerInfos }) => ({
            label: batchName,
            key: batchName,
            icon: <Icon className="iconfont icon-youhuiquan" style={{ color: 'red' }} />,
            children: customerInfos?.map(({ customerFullName, requestedQuantity, conversionQuantity, consumptionQuantity }) => ({
              label: t`${customerFullName} / ${requestedQuantity} / ${conversionQuantity} / ${consumptionQuantity}`,
              key: customerFullName,
              icon: <Icon className="iconfont icon-kehu" style={{ color: 'red' }} />,
            })),
          })),
        },
      ];
      return (
        <div style={{ display: 'flex', textAlign: 'left', justifyContent: 'center' }}>
          <Tree
            defaultExpandAll
            dataSource={dataSource}
            onSelect={() => handleOpenCoupon(couponCount.find((n) => n.id === activity.id)?.count, 'special', activity)}
          />
        </div>
      );
    } else {
      return couponCount.find((n) => n.id === id)?.count?.map((p) => (
        <div style={{ display: 'flex', flexDirection: 'column' }}>
          <Button type="primary" text onClick={() => handleOpenCoupon(couponCount.find((n) => n.id === id)?.count || [], 'general', activity)}>{`${p?.batchName} / ${p?.requestedQuantity || 0} / ${p?.distributionCouponIds?.length || 0} / ${p?.consumedCouponIds?.length || 0}`}</Button>
        </div>));
    }
  };

  /**
   * 自定义上传规则
   * @param {*} param0
   */
  const handleCustomRequest = ({ file, onSuccess, onError }) => {
    const reader = new FileReader();
    reader.onloadend = async () => {
      try {
        await RSocket.rc({
          route: 'files.upload',
          args: {
            binary: {
              binaryId: file.uid,
              mimeType: file.type,
              filename: file.name,
            },
          },
          data: Buffer.from(reader.result),
        });
        onSuccess();
      } catch (e) {
        onError(e);
        Message.warning('上传失败');
      } finally {
        // eslint-disable-next-line no-undef
      }
    };
    reader.readAsArrayBuffer(file);
  };

  const handleOpenCharts = () => {
    history.push('/market/activity/charts');
  };

  const handleViewCharts = (result) => {
    objRef.current = result;
    setModal(['viewCharts']);
  };

  return (
    <TauPage className="page-container">
      <TauActionPanel
        onSearch={handleOnSearch}
        actions={[
          {
            name: 'btn-placeActivity',
            title: t`添加活动`,
            type: 'primary',
            onClick: handleOpenAdd,
          },
          {
            name: 'btn-charts',
            title: t`图表统计`,
            type: 'primary',
            onClick: handleOpenCharts,
          },
        ]}
        searchItems={[
          {
            name: 'enabled',
            type: 'select',
            props: {
              dataSource: toSelectDataSource(ENUMS.state),
              placeholder: t`启用状态`,
            },
          },
          {
            name: 'upDate',
            type: 'date-range',
            props: {
              placeholder: [t`开始创建时间`, t`结束创建时间`],
            },
          },
        ]}
        extraItems={[
          {
            name: 'cbx-showOrders',
            component: <Checkbox style={{ marginLeft: 10 }} onChange={(v) => setShowOrders(v)}>{t`查看订单`}</Checkbox>,
          },
          {
            name: 'cbx-showCoupon',
            component: <Checkbox style={{ marginLeft: 10 }} onChange={(v) => setShowCoupon(v)}>{t`查看卡券`}</Checkbox>,
          },
          {
            name: 'cbx-showPrice',
            component: <Checkbox style={{ marginLeft: 10 }} onChange={(v) => setShowPrice(v)}>{t`查看金额统计`}</Checkbox>,
          },
        ]}
        keywordSearch={{
          // enabled: true,
          placeholder: t`请输入关键字搜搜`,
        }}
        className="action-panel"
      />
      <div className="content">
        <Tab
          activeKey={store.tabStatus}
          onChange={(e) => {
            store.tabStatus = e;
          }}
        >
          {Object.entries(ENUMS.type).map((item) => <Tab.Item title={item[1]} key={item[0]} />)}
        </Tab>
        <TauTable
          instanceId={tableId}
          primaryKey="id"
          tableLayout="fixed"
          currentPage={store.pg.page}
          pageSize={store.pg.size}
          total={store.total}
          sort={store.tableSort}
          onFetch={(pg) => { store.pg = pg; }}
          loading={store.loading}
          dataSource={toJS(store.data)}
          columns={[
            { title: t`序号`, dataIndex: 'idx', width: 44, cell: (v, i) => store.idx(i) },
            column('id', {
              width: 128,
              cell: (v, _, activity) => <Button text type="primary" onClick={() => handleOpenView(activity)}>{v}</Button>,
            }),
            column('name', { width: 82 }),
            column('type', { width: 82 }),
            column('link', { width: 82 }),
            column('orderCount', {
              width: 88,
              cell: (v, _, activity) => <Button type="primary" text onClick={() => handleOpenOrder(activity)}>{counts.find((n) => n.id === activity.id)?.count || 0}</Button>,
            }),
            column('couponBatchList', {
              width: 200,
              cell: (v, _, activity) => couponComponent(activity),
            }),
            column('priceCount', {
              width: 168,
              cell: (v, _, activity) => {
                const findIdx = priceTotal.find((n) => n.id === activity.id)?.total;
                return (
                  <Button type="primary" text onClick={() => handleOpenPrice(findIdx)}>
                    {t`${findIdx?.requestedTotalPrice?.toFixed(2) || 0} / ${findIdx?.distributionTotalPrice?.toFixed(2) || 0} / ${findIdx?.consumedTotalPrice?.toFixed(2) || 0}`}
                  </Button>
                );
              },
            }),
            column('deadline', { width: 82 }),
            column('enabled', { width: 82 }),
            column('crDate', { width: 82 }),
            {
              title: t`操作`,
              dataIndex: 'activityNumber',
              width: 138,
              cell: (_, i, activity) => {
                const { type } = activity;
                const funcMenu = [
                  {
                    title: '编辑',
                    onClick: () => handleOpenEdit(activity),
                  },
                  {
                    title: '批次申领',
                    onClick: () => handleBatchApply(activity),
                  },
                  {
                    title: '二维码',
                    onClick: () => handelOpenQR(activity),
                  },
                  {
                    title: '专属通知',
                    onClick: () => handleSendNotify(activity),
                  },
                  {
                    title: '活动图表',
                    onClick: () => handleViewCharts(activity),
                  },
                ];
                if (type === '5') {
                  funcMenu.push(
                    {
                      title: '客户申领',
                      onClick: () => handleSendCoupon(activity),
                    },
                  );
                }
                if (type === '4') {
                  funcMenu.push(
                    {
                      title: '员工申领',
                      onClick: () => handleSendCoupon(activity),
                    },
                    {
                      title: '员工转赠',
                      onClick: () => handleTransfer(activity),
                    },
                  );
                }
                if (type === '3') {
                  funcMenu.push(
                    {
                      title: '申请卡券',
                      onClick: () => handleSendCouponBag(activity),
                    },
                    {
                      title: '申领详情',
                      onClick: () => handleAppliedDetail(activity),
                    },
                    {
                      title: '客服代发',
                      onClick: () => handleServiceSubstitution(activity),
                    },
                  );
                }
                if (type === '2') {
                  funcMenu.push({
                    title: '活动公告',
                    onClick: () => handleAnnouncement(activity),
                  });
                }
                return (
                  <MoreFuncDropDown
                    dropdownItems={funcMenu}
                    maxShow={1}
                  />
                );
              },
            },
          ].filter((c) => c.dataIndex !== 'orderCount' || showOrders)
            .filter((c) => c.dataIndex !== 'couponBatchList' || showCoupon)
            .filter((c) => c.dataIndex !== 'priceCount' || showPrice)
          }
        />
      </div>
      <Drawer
        visible={modal[0] === 'add' || modal[0] === 'edit' || modal[0] === 'view'}
        title={modal[0] === 'add' ? t`添加活动` : t`编辑活动【${objRef.current?.name}】`}
        style={{ maxWidth: '90%' }}
        closeMode={['esc', 'mask', 'close']}
        onClose={() => setModal([...modal, `toClose$${Date.now()}`])}
        width="100%"
      >
        <Tab>
          {TABSITEM.map(({ title, key, content }) => <Tab.Item title={title} key={key}>{content}</Tab.Item>)}
        </Tab>
      </Drawer>

      <Drawer
        visible={modal[0] === 'whiteList'}
        title={t`修改白名单【${objRef.current?.name}】`}
        style={{ maxWidth: '90%' }}
        closeMode={['esc', 'mask', 'close']}
        onClose={() => setModal([...modal, `toClose$${Date.now()}`])}
        width="600px"
      >
        <AddWhiteList
          activity={objRef.current}
          modal={modal}
          onCancel={handleCancel}
          onSubmit={handleAdd}
        />
      </Drawer>

      <Drawer
        visible={modal[0] === 'apply'}
        title={t`批次申领`}
        style={{ maxWidth: '90%' }}
        closeMode={['esc', 'mask', 'close']}
        onClose={() => setModal([...modal, `toClose$${Date.now()}`])}
        width="800px"
      >
        <BatchApply
          activity={objRef.current}
          modal={modal}
          onCancel={handleCancel}
          onSubmit={batchApplySubmit}
        />
      </Drawer>

      <Drawer
        visible={modal[0] === 'viewCoupon'}
        title={t`查看卡券`}
        style={{ maxWidth: '90%' }}
        closeMode={['esc', 'mask', 'close']}
        onClose={() => setModal([...modal, `toClose$${Date.now()}`])}
        width="70%"
      >
        <CouponsTab
          couponInfo={couponInfo}
          activityType={activityType}
          activity={objRef.current}
          modal={modal}
          onCancel={handleCancel}
          onSubmit={batchApplySubmit}
        />
      </Drawer>

      <Drawer
        visible={modal[0] === 'orders'}
        title={t`查看订单`}
        style={{ maxWidth: '90%' }}
        closeMode={['esc', 'mask', 'close']}
        onClose={() => setModal([...modal, `toClose$${Date.now()}`])}
        width="90%"
      >
        <Orders
          activity={objRef.current}
          modal={modal}
          onCancel={handleCancel}
          onSubmit={handleAdd}
        />
      </Drawer>

      <Drawer
        visible={modal[0] === 'couponBag'}
        title={t`申领卡券`}
        style={{ maxWidth: '90%' }}
        closeMode={['esc', 'mask', 'close']}
        onClose={() => setModal([...modal, `toClose$${Date.now()}`])}
        width="900px"
      >
        <SendCouponBag
          activity={objRef.current}
          modal={modal}
          onCancel={handleCancel}
          onSubmit={sendCouponBagSubmit}
        />
      </Drawer>

      <Drawer
        visible={modal[0] === 'coupon'}
        title={t`申领卡券`}
        style={{ maxWidth: '90%' }}
        closeMode={['esc', 'mask', 'close']}
        onClose={() => setModal([...modal, `toClose$${Date.now()}`])}
        width="900px"
      >
        <SendCoupon
          activity={objRef.current}
          modal={modal}
          onCancel={handleCancel}
          onSubmit={sendCouponSubmit}
        />
      </Drawer>

      <Drawer
        visible={modal[0] === 'appliedDetail'}
        title={t`申领记录`}
        style={{ maxWidth: '90%' }}
        closeMode={['esc', 'mask', 'close']}
        onClose={() => setModal([...modal, `toClose$${Date.now()}`])}
        width="70%"
      >
        <AppliedDetail
          customer={objRef.current}
          modal={modal}
          onCancel={handleCancel}
          onSubmit={sendCouponSubmit}
        />
      </Drawer>

      <Drawer
        visible={modal[0] === 'substitution'}
        title={t`代发卡券`}
        style={{ maxWidth: '90%' }}
        closeMode={['esc', 'mask', 'close']}
        onClose={() => setModal([...modal, `toClose$${Date.now()}`])}
        width="900px"
      >
        <SubstitutionCoupon
          activity={objRef.current}
          modal={modal}
          onCancel={handleCancel}
          onSubmit={substitutionCouponSubmit}
        />
      </Drawer>

      <Drawer
        visible={modal[0] === 'transfer'}
        title={t`员工转赠卡券`}
        style={{ maxWidth: '90%' }}
        closeMode={['esc', 'mask', 'close']}
        onClose={() => setModal([...modal, `toClose$${Date.now()}`])}
        width="600px"
      >
        <Transfer
          activity={objRef.current}
          modal={modal}
          onCancel={handleCancel}
          onSubmit={couponTransferSubmit}
        />
      </Drawer>

      <Drawer
        visible={modal[0] === 'announcement'}
        title={t`活动公告配置`}
        style={{ maxWidth: '90%' }}
        closeMode={['esc', 'mask', 'close']}
        onClose={() => setModal([...modal, `toClose$${Date.now()}`])}
        width="600px"
      >
        <Announcement
          activity={objRef.current}
          modal={modal}
          onCancel={handleCancel}
          onSubmit={handleUpdate}
          handleCustomRequest={handleCustomRequest}
        />
      </Drawer>

      <Drawer
        visible={modal[0] === 'notify'}
        title={t`专属通知`}
        style={{ maxWidth: '90%' }}
        closeMode={['esc', 'mask', 'close']}
        onClose={() => setModal([...modal, `toClose$${Date.now()}`])}
        width="600px"
      >
        <SendNotify
          activity={objRef.current}
          modal={modal}
          onCancel={handleCancel}
          onSubmit={onSendNotifySubmit}
          handleCustomRequest={handleCustomRequest}
        />
      </Drawer>

      <Drawer
        visible={modal[0] === 'priceCount'}
        title={t`查看批次金额统计`}
        style={{ maxWidth: '90%' }}
        closeMode={['esc', 'mask', 'close']}
        onClose={() => setModal([...modal, `toClose$${Date.now()}`])}
        width="70%"
      >
        <PriceCountTab
          activity={objRef.current}
          modal={modal}
          onCancel={handleCancel}
          onSubmit={handleUpdate}
        />
      </Drawer>

      <Drawer
        visible={modal[0] === 'viewCharts'}
        title={t`查看图表统计`}
        style={{ maxWidth: '90%' }}
        closeMode={['esc', 'mask', 'close']}
        onClose={() => setModal([...modal, `toClose$${Date.now()}`])}
        width="100%"
      >
        <ChartsStatistic
          activity={objRef.current}
          modal={modal}
          onCancel={handleCancel}
        />
      </Drawer>

      <QR modal={QRModal} />
    </TauPage>
  );
}

export default observer(Activity);
